<template>
    <div class="container">
        <!-- 头部 -->
        <header class="header">
            <h1>一站全买商城</h1>
            <input type="text" v-model="searchQuery" placeholder="搜索商品..." class="search-input" />
        </header>

        <!-- 商品分类 -->
        <nav class="category-bar">
            <ul>
                <li v-for="category in categories" :key="category" @click="selectCategory(category)"
                    :class="{ 'active': selectedCategory === category }">
                    {{ category }}
                </li>
            </ul>
        </nav>

        <!-- 商品展示 -->
        <section class="product-section">
            <h2>热门商品</h2>
            <div class="product-grid">
                <div class="product-card" v-for="product in filteredProducts" :key="product.id">
                    <img :src="product.image" alt="Product Image" class="product-image" />
                    <h3>{{ product.name }}</h3>
                    <p class="price">{{ product.price }}元</p>
                    <button class="add-to-cart-button" @click="addToCart(product)">加入购物车</button>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
    setup() {
        const searchQuery = ref('');
        const selectedCategory = ref('');

        const categories = ['电子产品', '服装', '家居用品', '运动户外', '美容护肤'];

        const products = ref([
            { id: 1, name: '智能手机', price: 2999, image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.9tiYco-vjTydwrYrs7DbdQHaHa?rs=1&pid=ImgDetMain', category: '电子产品' },
            { id: 2, name: '蓝牙耳机', price: 899, image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.kOm_crgRpT51JN2xTGo_FQHaHa?rs=1&pid=ImgDetMain', category: '电子产品' },
            { id: 3, name: '运动鞋', price: 599, image: 'https://img.alicdn.com/i1/405119695/O1CN0130cgwr2LUMfYYX7pw_!!405119695.jpg', category: '运动户外' },
            { id: 4, name: '咖啡机', price: 1299, image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.SLKmhmRr1so9abCbEx8kcgHaHa?rs=1&pid=ImgDetMain', category: '家居用品' },
            { id: 5, name: '化妆品套装', price: 499, image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.IgJNPhC1Xi-PSRvzjbSOqQHaHa?rs=1&pid=ImgDetMain', category: '美容护肤' },
            { id: 6, name: '夏季T恤', price: 199, image: 'https://gw.alicdn.com/imgextra/i3/2212879974194/O1CN01RULT801gqtwYcj2ot_!!0-item_pic.jpg', category: '服装' },
            { id: 7, name: '运动背包', price: 399, image: 'https://ts1.cn.mm.bing.net/th/id/R-C.ca0fb64315c03239baf09daa777e5f3b?rik=pHzmBrIcJMiCyA&pid=ImgRaw&r=0', category: '运动户外' },
            { id: 8, name: '智能手表', price: 1999, image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.bXl9X9fzjsEPEyy-zqwpMAHaHa?rs=1&pid=ImgDetMain', category: '电子产品' },
            { id: 9, name: '男士运动风衣', price: 899, image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.IzaIHkUf65_wpjGWQXkyuAHaJw?rs=1&pid=ImgDetMain', category: '服装' },
            { id: 10, name: '烤箱', price: 899, image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.rYUK_vtfYfSychmEqoDdqAHaHa?rs=1&pid=ImgDetMain', category: '家居用品' },
            { id: 11, name: '无线吸尘器', price: 1199, image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.ro0ej-8qvKoPD440TpKs4AHaHM?rs=1&pid=ImgDetMain', category: '家居用品' },
            { id: 12, name: '运动水壶', price: 150, image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.o3hVJRxuFDb1SP2r4xCQrQDYEg?rs=1&pid=ImgDetMain', category: '运动户外' },
            { id: 13, name: '女性香水', price: 349, image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.rZbVTwReAoXT7mxvdzxK_wHaHa?rs=1&pid=ImgDetMain', category: '美容护肤' },
            { id: 14, name: '健身器械', price: 899, image: 'https://img.alicdn.com/bao/uploaded/i2/161822459/O1CN01FBWPr01U2GPbNTuCo_!!161822459.jpg', category: '运动户外' },
            { id: 15, name: '冬季外套', price: 1099, image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.HJai6VAPR8vU8azHqcAV_QHaHa?rs=1&pid=ImgDetMain', category: '服装' },
            { id: 16, name: '智能音箱', price: 699, image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.xkB6Ea7598lcI35szhuXhAHaHa?rs=1&pid=ImgDetMain', category: '电子产品' },
            { id: 17, name: '蓝牙音响', price: 499, image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.pTkEbnrYTbOvvAESw2cudwHaHa?rs=1&pid=ImgDetMain', category: '电子产品' },
            { id: 18, name: '办公桌椅', price: 2599, image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.TKKcoDyfsMedr7BJbBF_OwHaHa?rs=1&pid=ImgDetMain', category: '家居用品' },
            { id: 19, name: '床上用品套装', price: 799, image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.NWIJMY4gaFqPRWyfDfaV-wHaHZ?rs=1&pid=ImgDetMain', category: '家居用品' },
            { id: 20, name: '男士皮带', price: 299, image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.oEi79UR-jmzPYCH8CuBmRAHaHa?rs=1&pid=ImgDetMain', category: '服装' },
        ]);

        const filteredProducts = computed(() => {
            return products.value.filter(product => {
                const matchesCategory = selectedCategory.value ? product.category === selectedCategory.value : true;
                const matchesSearch = product.name.toLowerCase().includes(searchQuery.value.toLowerCase());
                return matchesCategory && matchesSearch;
            });
        });

        const selectCategory = (category) => {
            selectedCategory.value = category === selectedCategory.value ? '' : category;
        };

        const addToCart = (product) => {
            alert(`${product.name} 已添加到购物车！`);
        };

        return {
            searchQuery,
            selectedCategory,
            categories,
            filteredProducts,
            selectCategory,
            addToCart
        };
    }
};
</script>

<style scoped>
.container {
    font-family: Arial, sans-serif;
    margin: 0 auto;
    max-width: 1200px;
}

.header {
    background-color: #27ba9b;
    /* 主色调 */
    color: white;
    text-align: center;
    padding: 20px 0;
}

.search-input {
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
    border: none;
    width: 80%;
}

.category-bar {
    background-color: #f8f9fa;
    /* 浅灰色 */
    padding: 10px 0;
}

.category-bar ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    justify-content: center;
}

.category-bar li {
    margin: 0 15px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}

.category-bar li.active {
    color: #27ba9b;
    /* 主色调 */
}

.product-section {
    padding: 20px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.product-card {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    transition: transform 0.2s;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
}

.product-card:hover {
    transform: scale(1.05);
}

.product-image {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.price {
    font-size: 1.2em;
    color: #27ba9b;
    /* 主色调 */
    font-weight: bold;
}

.add-to-cart-button {
    background-color: #27ba9b;
    /* 主色调 */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.add-to-cart-button:hover {
    background-color: #1e9b7a;
    /* 更深的颜色 */
    transform: scale(1.05);
}

.footer {
    text-align: center;
    padding: 20px 0;
    background-color: #f8f9fa;
    /* 浅灰色 */
}
</style>